资讯详情本篇文章要讲的设计原则包含六类：
1.尼尔森十大可用性原则
2.三大原则定律
3.Ant Design设计原则
4.微信小程序设计原则
5.iOS设计原则
6.Material Dedign 设计原则
尼尔森（Jakob Nielsen）是一位人机交互学博士，于1995年1月1日发表了「十大可用性原则」。十大可用性原则不仅适用于Web端,也适用于移动端。
熟练掌握十大可用性原则对于指导设计来说意义重大，可提升整个产品的可用性体验。
十大可用性原则分别为：状态可感知、贴近用户认知、操作可控、一致性、防错、识别好过回忆、灵活高效、美学和最简主义原则、容错、人性化帮助。
定义：告知系统的当前状态，让用户可清晰的感知所处的操作状态。
例如：淘宝注册，用户所处流程情况通过步骤条，可以清晰告知用户注册整体的注册流程状态。
例如：微信转发消息，发送成功时，通过底部的snakcbar提示告知用户转发成功。
定义：尽量将生活中的逻辑和设计逻辑保持统一，这样就会更贴近用户的认知，用户上手成本也就更低。
例如：iOS7之前的iPhone解锁，滑动解锁，这和生活中的用户侧拉开门的场景一样。这个设计非常贴切日常生活认知，用户上手成本特别低。
例如：微信红包的设计，红包样式和现实中用户认知的红包基本一致，都是红色且外观相似。
用户要发红包时，先要塞钱进红包。其他人点击红包时，有一个拆开的按钮，用户拆开就会存入零钱，整个流程完全贴近用户的生活认知。
定义：用户对于行为可预期可控制。对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。
例如：移动端中对于毁灭性操作，大部分都做二次确认，这样是防止用户误操作带来的删除损失。用户不用因为操作带来的心里负担，从而提升操作可控性。
例如：微信聊天对话列表，用户删除列表，由于会清空消息记录，因此，通过对话框提示用户，这种做法可提升操作可控。
例如：gmail邮箱，用户发送邮件成功后，可点击撤回操作。
定义：遵循统一的产品设计规范／逻辑。这里的一致性也包含产品和跨平台产品之间的一致性。
产品间的一致性，包含视觉和交互的一致性，无论是文案、视觉风格、组件样式等都包含一致性。
例如：微信的卡片结构设计，列表的提示文案都是卡片里面，这个遵循Material design设计规范，ios中设计则提示语在卡片下方。
定义：设置防错的机制，减少用户犯错。避免因为没有做防错措施，导致用户去犯错误。
例如：微信朋友圈发动态时，什么都没有输入时，发表按钮置灰。如果不置灰时，点击发送是空数据，是不允许发送的。所以防错设计可以减少用户出错概率。
定义：减少用户记忆负荷，尽量提供用户需要获取的信息。
例如：boss直聘，二次筛选时，所有填写是我筛选条件都展示出来，方便用户查看和修改。
例如：三星手机相册，当删除相册时，对话框会把选择删除的数量标题上展示，提示用户会删除多少张，减少用户回忆。
定义：提供灵活的操作和高效的获取信息的操作。
例如：mac原生邮件客户端上，提供过滤方式：未读，点击未读即可筛选出所有未读的邮件，灵活高效。
例如：短信提供批量删除和全选删除，这也是灵活高效的一个常见范例。
定义：保留产品最核心的信息，如果不是视觉信息优先级不是普适需求，要尽一切可能避免去影响产品的简洁和美观。
qq空间和微信朋友圈的feed流形成比较明显的对比。相比于qq空间，微信朋友圈更符合美学和最简主义原则。
定义：用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。
例如：淘宝注册时，用户输入手机号时，光标离开输入框时，进行较验，如果手机格式错误会出现原位提示用户手机格式不正确。
例如：邮件发送失败时，会提示用户邮件已保存至发件箱。
定义：在用户可能需要的时候，提供必要的帮助说明。
例如：在淘宝注册时，用户注册失败影响注册成功率，提供帮助入口，提高用户注册率。
三大原则定律包括：格式塔原则、菲茨定律和剃刀法则。
通俗地说格式塔就是知觉的最终结果。是我们在心不在焉与没有引入反思的现象学状态时的知觉。
格式塔原则包含五个特性，分别为：相近性、相似性、封闭性、连续性和简单性。
1.相近性：人们会将距离相近的部分潜意识当作一个整体。例如下图所示。左侧距离都相同，人们会认为是一个整体，右侧三四列和一二列相隔较远，人们会认为这是两部分。
例如：印象笔记拍照设置界面，保存照片到你添加到笔记的照片备份到相机胶卷。距离保存照片卡片距离较近，所以用户会认为这个是针对保存照片的提示语。
2.相似性：人们会将相似的部分，当做一个分组整体。例如下图，一组圆形，人们会当做一个组成部分。一组矩形，人们会当做另一组组成部分。
例如：支付宝首页界面。扫一扫、付钱、收钱、卡包这四组相似的布局和icon，人们会当做一个分组。下方的转账、花呗、芝麻信用、淘票票电影等宫格导航，人们会当做另一个分组。
3.封闭性：元素处于一个封闭空间，人们会将各个部分趋于组成整体。例如圆形被线框包围，人们会将这个当作一个整体。
例如：新浪微博国际版，通过卡片来分割一条微博信息动态，这样和其他微博可以产生强烈区分，卡片的好处就是可以容纳更多的操作和信息。
4.连续性：人们倾向于完整的连成一个图形，而不是观察残缺的线条或者形状。
例如：app store 卡片展示，卡片因为露出一部分，用户有一种连续性的感知，人们知道右边还有卡片，用户就会尝试用手拖动卡片，查看更多卡片信息。
5.简单性：具有对称、规则的简单图形特征各部分趋于组成整体。
支付宝首页，各个功能模块具有对称、规则的简单性。
任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。
得到结论：越是重要按钮，按钮要越大，这样操作时间就越短，越方便。位置距离用户操作越近，这样用户越易点击。
类似音乐类产品，都是将播放/暂停做的比上一首下一首做的大，同时放置于底部，目的就是方便用户快速点击。
这个原理称为“如无必要，勿增实体”，即“简单有效原理”。若无必要，勿增实体。
不必要的元素会导致设计效率的降低，并且会增加不可预期的后果。在设计中我们可以去掉不必要的干扰元素，这样页面会比较纯粹、简洁。
例如：下图所示，左图为蚂蚁借呗，里面信息字段较多，需要用户多次进行选择。
而右侧为微信的微粒贷，用户只需要选择还款期数即可，微信的微粒贷操作简单，用户在整个流程体验过程中流程，没有停顿感。从业务层面来说，蚂蚁借呗因为需要收集用户尽可能多的信息，所以字段信息比较大，而微粒贷却不需要。
详情请登陆ant design的网站查看：ant.design.com。里面都有详细的案例，方便大家理解和掌握
Ant Design设计原则一共包含10条，分别为：亲密性、对齐、对比、重复、直截了当、足不出户、简化交互、提供邀请、巧用过渡、即时反应。
1.亲密性：如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
2.对齐：正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
3.对比：对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
4.重复：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
5.直截了当：正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
6.足不出户：能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
7.简化交互：根据费茨法则（Fitts’s Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
8.提供邀请：很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
9.巧用过渡：人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
10.即时反应：『提供邀请』的强大体现在交互之前给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在交互期间为用户提供视觉反馈；『即时反应』的重要性体现在交互之后立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
原帖请查看微信小程序设计指南官方网站：https://developers.weixin.qq.com/miniprogram/design/
基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。
微信小程序设计原则分为四部分，分别为：友好礼貌、清晰明确、便捷优雅和统一稳定。
为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。
1.突出重点：每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。
2.流程明确：为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。
1.导航明确，来去自如：导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。微信在小程序内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。此外，微信iOS用户还可通过界面边缘向右滑动操作，返回上一级小程序或微信页面。安卓用户可通过物理返回键达到同样目的。
小程序菜单：小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。官方小程序菜单将放置在界面固定位置，开发者在设计界面时请预留出该区域空间，若需要在此区域附近放置可交互元素，要特别注意交互事件是否会冲突，操作是否容易被使用 。
小程序菜单深浅配色方案（iOS和Android）：开发者可在满足可用性的前提下，从微信提供的深浅两套配色的小程序菜单中选择合适的方案，以适应小程序页面设计风格。
页面内导航：开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致，指向清晰，有路可退。受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
2.减少等待，反馈及时：页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。
启动页加载：小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
页面下拉刷新加载：在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
页面内加载反馈：开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
h5页面作业
